<script setup lang="ts">
import useClass from '@/hooks/useClass'
const { loadList, list, navToGood, responseData, changeQuery, queryForm } = useClass()
const emits = defineEmits(['header', 'bread'])
import { useRoute } from 'vue-router'
const route = useRoute()
emits('header', true, route.query.id)
emits('bread', true)

loadList({ cate_id: route.query.id || '' })

import emitter from '@/utils/mitter'
emitter.on('get-cate_id', (value: string) => {
  loadList({ cate_id: value })
})
import { onUnmounted } from 'vue'
onUnmounted(() => {
  emitter.off('get-cate_id')
})
import Limit from '@/components/limit.vue'
</script>
<template>
  <div>
    <div class="sort">
      <div>综合排序</div>
      <div>销量</div>
      <div>价格</div>
    </div>
    <div class="goods_list" v-if="list.length != 0">
      <div class="goods_item" v-for="item in list" :key="item.sku" @click="navToGood(item)">
        <img :src="item.goods_logo" alt="" />
        <div class="goods_name" :title="item.goods_name">{{ item.goods_name }}</div>
        <div class="goods_price">￥{{ item.price }}</div>
      </div>
    </div>
    <el-empty description="暂无商品" v-if="list.length == 0" />
    <Limit @querychange="changeQuery" :data="queryForm" />
  </div>
</template>

<style lang="scss" scoped>
.sort {
  margin: 0 auto;
  width: 1180px;
  border: 1px #ccc solid;
  padding: 10px;
  display: flex;
  div {
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
  }
}
.goods_list {
  margin: 0 auto;
  margin-top: 20px;
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  .goods_item {
    cursor: pointer;
    width: 198px;
    height: 260px;
    margin-right: 50px;
    margin-bottom: 10px;
    border: 1px #ccc solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .goods_name {
      width: 95%;
      height: 20%;
      font-size: 18px;
      font-weight: bold;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -moz-box;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .goods_price {
      color: #ff0000;
      font-size: 20px;
      font-weight: bold;
      width: 95%;
      height: 10%;
      text-align: right;
    }
    img {
      transform: scale(0.95);
      height: 70%;
      width: 95%;
      transition: all 0.5s;
      &:hover {
        transform: scale(1);
        transition: all 0.5s;
      }
    }
    &:nth-child(5n) {
      margin-right: 0;
    }
    &:hover {
      color: $themeColor;
      box-shadow: 5px rgba(0, 0, 0, 0.5);
      transition: all 0.5s;
    }
  }
}
</style>
